| 在WPF中嵌入WebBrowser可视化页面 | 您所在的位置：网站首页 › wpf webbrowser js › 在WPF中嵌入WebBrowser可视化页面 |
在WPF中嵌入WebBrowser可视化页面
在WPF中嵌入WebBrowser可视化页面
2022年08月30日
•
.net
• 我要评论
无论是哪种c/s技术，涉及数据可视化就非常的累赘了，当然大神也一定有，只不过面向大多数人，还是通过网页来实现，有的时候不想把这两个功能分开，一般会是客户的原因，所以我们打算在wpf中嵌入webbrow
无论是哪种c/s技术，涉及数据可视化就非常的累赘了，当然大神也一定有，只不过面向大多数人，还是通过网页来实现，有的时候不想把这两个功能分开，一般会是客户的原因，所以我们打算在wpf中嵌入webbrowser，然后使用echarts 完成复杂的图表展示，其功能不亚于一个名为devexpress的图标库，而且这东西还收费(呵呵)，本文就对webbrowser+echarts进行了演示。 首先下载一下echats.js文件以及jquery文件并且创建一个html页面，在我们项目的bin文件夹中。
在html中编辑，其中包括了几个方法，是对c#代码进行访问的。 echarts html页面 测试 function click1() { window.external.showmsg("这是一条信息"); } mychart = echarts.init(document.getelementbyid('main')); option = { xaxis: { type: 'category', data: ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'] }, yaxis: { type: 'value' }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line' }] }; mychart.setoption(option); function setoption(value) { var dataobj = json.parse(value);//将字符串转换为json对象 mychart.setoption(json.parse(dataobj));//将json对象转换为[object] } function jsshowhide(info) { if (info == 0) { mychart.clear(); } else { mychart.setoption(option); } } function jspushdata(x, y) { option.xaxis.data.push(x); option.series[0].data.push(y); mychart.setoption(option); }现在我们需要编辑一下我们的wpf窗体，在其中放入我们的浏览器，然后让它显示我们刚刚写好的页面。 在windows标记中我们需要一个load事件用于让webbrowser跳转到相应的页面。 private void window_loaded(object sender, routedeventargs e) { web.navigate(new uri(directory.getcurrentdirectory() + "/demo.html")); }最后我们还需要创建几个方法，用于让c#直接调用其中js方法。 int show = 0; private void btnshowhide_click(object sender, routedeventargs e) { web.invokescript("jsshowhide", show); if (show == 0) show = 1; else show = 0; } private void btnpushdata_click(object sender, routedeventargs e) { web.invokescript("jspushdata", "x", 1000,"y","200"); } private void setoption(object sender, routedeventargs e) { string strobj = @"{""xaxis"":{""type"":""category"",""data"":[""mon"",""tue"",""wed"",""thu"",""fri"",""sat"",""sun""]},""yaxis"":{""type"":""value""},""series"":[{""data"":[100,200,300,400,500,600,700],""type"":""line""}]}"; var aa = jsonconvert.serializeobject(strobj.trim()); web.invokescript("setoption",aa); }因为我们在xaml中把webbrowser的name改成了web，其中这个控件自带一个invokescript方法，就是来使用页面写好的function，就这样启动~
可见效果还可以，就现在我们要通过js调用c#方法，首先编辑一个页面可操作的类，我们创建 echatshelper ,必须在类上面标注特性，否则程序启动不起来，因为webbrowser是涉及一些安全性的东西，只要是在哪个类new出来，就必须在哪个类标注特性。 [permissionset(securityaction.demand, name = "fulltrust")] [system.runtime.interopservices.comvisible(true)]//给予权限并设置可见 public class echatshelper { webbrowser web; public echatshelper(webbrowser web) { this.web = web; } public void showmsg(string msg) { console.writeline(msg); } }最后我们在load事件中创建应用程序对文档文件的寄宿脚本访问。 private void window_loaded(object sender, routedeventargs e) { web.objectforscripting = new echatshelper(web); web.navigate(new uri(directory.getcurrentdirectory() + "/demo.html")); }就这样~我们测试一下~ 赞 (0) 打赏  微信扫一扫
相关文章:
C#实现接收QQ邮件的示例代码 前面写了一篇通过smtp协议利用qq邮箱去实现发送邮件的功能。这一篇我们使用pop协议来实现一下接收邮件。由于邮件的内容类型比较丰富，我暂时没有一个比较好的解决... [阅读全文]
提供一个中国身份证号码判断的类 本文章的目的是实现一个用于身份证号码判断是否有效的功能首先，创建一个身份证基类： /// /// 中国大陆身份证 ... [阅读全文]
第4章 打包和构建 identityserver由许多nuget包组成。4.1 identityserver4nuget | github上包含核心identityserver对象... [阅读全文]
工程文件csproj使用编译条件指定属性 csproj工程文件中有很多xml格式的属性，比如propertygroup、itemgroup，某些属性操作默认是全部的或者是当前编译条件的而已，当我们想指定... [阅读全文]
如何更加安全快速的使用富文本编辑器 title: 如何更加安全快速的使用富文本编辑器date: 2019-03-28 08:45:28tags: c#---众所周知，富文本编辑器是目前用途广泛的前... [阅读全文] ABP进阶教程7 - 功能按钮点这里进入abp进阶教程目录下载插件打开datatables官网(https://datatables.net/download/)勾选extensions/buttons，下载插… 2022年08月30日 • 开发语言版权声明：本文内容由互联网用户贡献，该文观点仅代表作者本人。本站仅提供信息存储服务，不拥有所有权，不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实将立刻删除。 发表评论
验证码：
|
【本文地址】